<template>
	<view>

        <view class="banner">
            <img src="@/static/img00/seek-img.png">
        </view>

        <view class="budget-cont">
            <view class="budget">购房预算</view>
            <view class="money">{{money}}万</view>
            <slider @change="sliderChange" class="budget-list" min="10" max="1000" value="50" name="slider" show-value></slider>


            <view class="budget-list ">
                <view class="ideal">理想区域</view>

                <view class="select">
                    <!-- <select class="select-opti">
                        <option >不限</option>
                        <option v-for="(item, index) in qu_res" :key="index" :value="item.id" >{{item.name}}</option>
                    </select> -->
					
					<picker @change="bindPickerChange" :value="index" :range="qu_res_array">
						<view class="uni-input">{{qu_res_title}}</view>
					</picker>
					
					
                </view>     
            </view>

            <view class="budget-list nomb">
                <view class="ideal">理想户型</view>
                <view class="jushi">
                    <ul>
                        <li @click="seletced(index)"
                            v-for="(item,index ) in titleArr" 
                            :key="index" 
                            :class="[index == active ? 'active':'none']"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </view>
            </view>
            
            <button @click="sub()">确定</button>
        </view>
		
		
		<uni-popup ref="popup" type="center">
		    <view class="pop-content">
		        <view  class="pop-bohu">
		            <view @click="close()" class="pop-shut"></view>
		
		            <view class="pop-title">{{pop_title}}</view>
		
		            <p class="pop-text">{{pop_text}}</p>
		
		            <view class="pop-phone">
		                <input @input="onKeyInput2" :value="mobile" type="text" placeholder="请输入手机号">
		            </view>
		
		            <button class="pop-btn-area"  @click="expert">确定</button>
		        </view> 
		    </view>   
		</uni-popup> 
		
		<uni-popup ref="message" type="center">
		    <view class="pop-expert2-popup">
		        <p class="pop-expert2-popup-p">请输入正确格式的手机号</p>
		        <p @click="close1()" class="pop-expert2-popup-shut">取消</p>
		    </view>
		</uni-popup>
		
	</view>
</template>

<script>
	
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
		},
		data() {
			return {
                money:50,
                qu_res:[],
				qu_res_array: ['不限'],
				qu_res_title:'不限',
				index:0,
				select_qu_id:-1,
				select_qu_name:'不限',
				active:0,
                titleArr: [
                    {  name: "不限"},
                    {  name: "一居室" },
                    {  name: "二居室" },
                    {  name: "三居室"},
                    {  name: "四居室" },
                    {  name: "五居室以上"},
                ],
				param:{},
				
				//弹窗
				pop_title:'购房预算',
				pop_text:'填写您的手机号码，匹配到合适楼盘马上联系您',
				mobile:''
			}
		},
		onLoad() {
			
			this.$api.getQuOrHu({
				},
				res => {
					//区域
					this.qu_res = res.qu_res;
					for(let i=0;i<res.qu_res.length;i++){
						this.qu_res_array.push(res.qu_res[i].name);
					}
				}
			);
			
			
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value;
				this.qu_res_title =	this.qu_res_array[this.index];
				if( this.index -1 == -1 ){
					this.select_qu_name = '不限';
					this.select_qu_id = -1;
				}else{
					this.select_qu_name = this.qu_res[this.index -1 ].name;
					this.select_qu_id = this.qu_res[this.index -1 ].id;
				}
			},
			 seletced(index) {
				 this.active = index;
			},
			sliderChange(e) {
				this.money = e.detail.value;
			},
			//提交表单
			sub(){
				let _this = this;
				let money = this.money;//购房预算
				let select_qu_id = this.select_qu_id;//理想区域
				let huxing = this.active;//理想户型
				
				this.param  = {
					'type':'yusuan',
					'msg':'购房预算',
					'content':{
						'cost_budget':money,
						'qu':select_qu_id,
						'huxing':huxing
					},
				};
				
				this.$refs.popup.open();
				/* 
				this.$api.pushAjaxSubmit({
						param:_this.param
					},
					res => {
						
						console.log(res);
					}
				);
				 */
			},
			
			
			expert(){
				//提交
				let _this = this;
				let mobile = this.mobile;
				if(mobile == ''){
					uni.showToast({
					    title: '手机号码不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(mobile)) {
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				this.param.mobile = mobile;
				this.$api.pushAjaxSubmit({
						param:_this.param
					},
					res => {
						// this.money = 50;
						// this.qu_res_array = ['不限'];
						// this.index= 0;
						// this.select_qu_id=-1,
						// this.select_qu_name='不限',
						// this.active=0,
						console.log(res);
						if(res.code == 1){
							uni.showToast({
							    title: res.msg,
							    duration: 2000
							});
						}else{
							uni.showToast({
							    title: res.msg,
							    duration: 2000,
								icon:'none'
							});
						}
						this.$refs.popup.close()
					}
				);
			},
			
			close(){
			     this.$refs.popup.close()
			},
			close1(){
			    this.$refs.message.close()
			},
			onKeyInput2: function(event) {
				this.mobile = event.target.value
			},
		}
	}
</script>

<style scoped>
/* .wei{
    height: 100upx;
    width: 100upx;
    background: #13c3c3;
} */
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
    .banner{
        height: 450upx;
    }
    .banner>img{
        height: 450upx;
    }
    .budget-cont{
        height: 990upx;
        width: 690upx;
        background: #fff;
        margin: 0 auto;
        padding-left:30upx;
        padding-right: 30upx;
    }
    .budget{
        font-size: 34upx;
        text-align: center;
        padding: 40upx 0 40upx 0;
    }
    .money{
        height: 75upx;
        width: 180upx;
        background: #13c3c3;
        text-align: center;
        color: #fff;
        font-size: 34upx;
        line-height: 74upx;
        -webkit-border-radius: 140upx;
        -moz-border-radius: 140upx;
        margin: 0 auto;
    }
    .budget-list{   
        margin: 40upx 0 40upx 0;     
    }

    .ideal{
        height: 42upx;
        color: #333;
        text-align: center;
        font-size: 32upx;
        margin-bottom: 20upx;
        margin-top: 20upx;
    }
    .select{
        height: 80upx;
        width: 630upx;
        padding-left:10upx ;
        background: #f4f4f4;
        border-radius:14upx;
    }
	.uni-input{
		height: 80upx;
		line-height: 80upx;
	}
    .select-opti{
        height: 80upx;
        width: 600upx;
        background: #f4f4f4;
        border: none;
    }

    .nomb{
        
        width: 630upx;
        height: 260upx;
    }
    .jushi{
        height: 218upx;
        width: 630upx;
        
    }
    .jushi>ul{
        display: flex;
         flex-wrap:wrap;
       
    }
     .jushi ul li{
         height: 78upx;
         width: 188upx;
         margin-right:20upx ;
         text-align: center;
         /* background: #f4f4f4; */
         line-height: 78upx;
        margin-top: 20upx;
        border-radius: 10upx;
     }
     
     .active {
         background: #13c3c3;
		 color: #FFFFFF;
     }
	.none {
	    background: #f4f4f4;
	}

    button{
        background: #13c3c3;
        font-size: 30upx;
        color: #fff;
        margin-top: 20upx;
    }
	
	
	
	.pop-shut{
	    height: 32upx;
	    width: 32upx;
	    position: relative;
	    top:-30upx;
	    left: 98%;
	    background: url("../../../static/img00/shut.png") no-repeat;
	    background-size: 100% 100%;
	}
	.pop-content{
	    margin-left: 10%;
	    margin-right: 10%;
	    background: #fff;
	    border-radius: 10upx;
	    display: flex;
		width:80%;
	}
	.pop-bohu{
	    padding: 50upx 60upx 50upx 60upx;
	    margin: 0 auto;
	    align-self: center;
	}
	
	.pop-title{
	    font-size: 40upx;
	    font-weight: 550;
	    color: #3e4a59;
	    text-align: center;
	}
	.pop-text{
	    margin:30upx 0 50upx 0;
	    text-align: center;
		color: #000000;
		line-height: 60rpx;
		font-weight: 500;
	}
	.pop-phone{
	    border: 1upx solid #cdd7e1;
	    border-radius: 10upx;
	}
	.pop-phone>input{
	    padding: 0 30upx;
		color: #000000;
		font-weight: 500;
		border:1px solid #CCCCCC;
	}
	input{
	    height: 86upx;
	}
	.pop-btn-area{
	    margin-top: 30upx;
	    background: #13c3c3;
	    color: #fff;
	}
	
	.pop-expert2-popup{
	    width: 510upx;
	    height: 240upx;
	    background: #fff;
	    border-radius: 10upx;
	}
	.pop-expert2-popup-p{
	    height: 150upx;
	    text-align: center;
	    font-size: 28uxp;
	    color: #3e4a59;
	    line-height: 150upx;
	    border-bottom: 1upx solid rgb(195, 195, 195);
	}
	.pop-expert2-popup-shut{
	    text-align: center;
	    line-height: 90upx;
	    color: #47b3e3;
	}
	
</style>
